<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>BI Component - Date Picker</title>
    <script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
    <script type="text/JavaScript" src="../../api/js/jquery-ui-1.9.2.custom.js"></script>
    <link rel="Stylesheet" type="text/css" href="../../theme/css/style_reset.css"/>
    <link rel="Stylesheet" type="text/css" href="../../api/css/cupertino/jquery-ui-1.10.1.custom.css"/>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>

    <script>
        var BOI = parent.BOI; //REQUIRED
        var BOILib = parent.BOILib;
        var properties = { //REQUIRED
            variable: undefined,
            varname: undefined, //this overrides variable if set
            value: undefined,
            notify: false
        };

        window.onload = function () {
        }

        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            //example to set property values to dom elements
            $('.variable h3').html(properties.variable.description);
            $('.variable').attr('id', vname);

            refreshProperties();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var vname;
        var refreshProperties = function refreshProperties() { //REQUIRED function to be called by parent when a property change occurs
            vname = properties.varname ? properties.varname : properties.variable ? properties.variable.name : undefined;
            if (vname) {
            }
        };

        $(function(){
            $('#datepicker').live('click', function () {
                var htmlsrc = 'Bi_apps_comp_popupdate.htm';
                BOILib.Util.createIFrameDialog(htmlsrc, 'Date', 500, 500, -1, -1, window);

            });
        });

        function setSelectedValue(values){
            properties.value=values;
            if (typeof values == "object") {
                if(values.length > 0) {
                    $("#datepicker").val(values[0]);
                }
            }
        }
    </script>
    <style>
        .variable h3 {
            font-size: 14px;
            position: fixed;
            text-align: center;
            width: 100%;
            height: 30px;
            top: 0px;
            text-transform: "Capitalize";
            background-color: #ffffff;
            z-index: 10;
        }

        .variable .variable-inner {
            margin-top: 30px;
        }

        .variable .variable-inner ul li p {
            background-color: rgba(255, 255, 255, 0.5);
            border-bottom: 1px solid lightblue;
            padding: 5px 10px;
        }

        .variable input[type="text"] {
            border-radius: 5px;
            background-color: rgba(0, 0, 0, 0.035);
            padding: 4px 5px;
        }

    </style>

</head>
<body>
<div class="variable-cover">
    <div class="variable" id="">
        <h3>Date Picker</h3>

        <div class="variable-inner date-picker">
            <p>Date: <input type="text" id="datepicker"/></p>
        </div>
    </div>
</div>
</body>
</html>